import React, { memo } from "react";
import { useSelector } from "react-redux";
import "./index.scss";

const WYPlayHeader = memo(function (props) {
  const { playList, currentSong } = useSelector((state) => ({
    playList: state.getIn(["play", "playList"]),
    currentSong: state.getIn(["play", "currentSong"]),
  }));

  return (
    <div className="panel-play-header">
      <div className="play-l">
        <h3>播放列表({playList.length})</h3>

        <div className="operator">
          <button>
            <i className="sprite_playlist icon favor"></i>
            收藏全部
          </button>
          <button>
            <i className="sprite_playlist icon remove"></i>
            清除
          </button>
        </div>
      </div>

      <div className="play-r">{currentSong.name}</div>
    </div>
  );
});

export default WYPlayHeader;
